<template>
  <div>
    <Card>
      <p class="admin_title"
         style="margin-top: 0;margin-bottom: 20px;">
        编辑角色
      </p>
      <Row>
        <Col span="18">
          <Form :model="formValidate"
                ref="formValidate"
                :label-width="80">
            <FormItem label="角色名称"
                      prop="name">
              <Input v-model="formValidate.name"
                     placeholder="请输入角色名称"
                     disabled></Input>
            </FormItem>
            <FormItem label="角色描述"
                      prop="description">
              <Input v-model="formValidate.description"
                     type="textarea"
                     :rows="4"
                     placeholder="请输入角色描述"></Input>
            </FormItem>
            <FormItem label="选择权限"
                      prop="description">
              <div class="auth_select">
                <Tree :data="auth_list" show-checkbox :check-strictly="true" @on-check-change="selectTreeChange"></Tree>
              </div>
            </FormItem>
            <FormItem>
              <Button type="primary"
                      @click="handleSubmit('formValidate')"
                      style="width: 90px;height: 34px;font-size: 14px;">提交</Button>
            </FormItem>
          </Form>
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
import { getAuthList, getRoleInfo, updateRole } from '@/api/main'
export default {
  data () {
    return {
      auth_type: localStorage.getItem('user_type'),
      auth_list: [],
      auth_selecte: [],
      auth_selected: [],
      formValidate: {
        name: '',
        description: '',
        auth_names: [],
      },
    }
  },
  methods: {
    selectTreeChange(e){
      let list = e.filter(item => { return item.checked == true })
      let arr = []
      list.map(item => {
        //console.log(item.key)
        arr.push(item.key)
      })
      //console.log(arr)
      this.auth_selecte = arr
      console.log(arr.join(','))
    },
    selectAuth (data) {
      this.auth_selecte = data;
    },
    handleSubmit () {
      let _this = this;
      //console.log(this.auth_selecte);return false;
      if (_this.formValidate.name == '') {
        _this.$Message.error("请填写角色名称"); return false;
      }
      if (_this.formValidate.description == '') {
        _this.$Message.error("请填写角色描述"); return false;
      }
      if (_this.auth_selecte.length == 0) {
        _this.$Message.error("请选择权限"); return false;
      }
      let obj = {}
      obj.name = _this.$route.params.name
      obj.description = _this.formValidate.description
      obj.auth_selecte = _this.auth_selecte
      //console.log(_this.auth_selecte);return false
      updateRole(obj).then(res => {
        if (res.code === 0) {
          _this.$Message.success('操作成功')
          _this.init()
        } else {
          _this.$Message.error(res.text)
        }
      })
    },
    init () {
      let obj = {}
      obj.name = this.$route.params.name
      getAuthList(obj).then(res => {
        if (res.code === 0) {
          this.auth_list = res.data
        }
      })
      getRoleInfo(obj).then(res => {
        if (res.code === 0) {
          this.formValidate.name = res.data.name
          this.formValidate.description = res.data.description
          this.auth_selecte = res.data.auth_data
          this.auth_selected = res.data.auth_data
        }
      })
    },
  },
  mounted () {
    this.init(0)
  },
}
</script>
<style type="text/css">
.auth_select {
	height: auto;
	border: 1px solid #dcdee2;
	border-radius: 5px;
	padding-left: 10px;
}
.auth_check {
	width: 45%;
	height: 35px;
	margin-left: 10px;
	display: inline-block;
	padding-left: 1%;
}
</style>
